<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<%@taglib prefix="lyndonfn" uri="http://github.com/lyndon/tags/lyndon-functions" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/css/metroStyle/metroStyle.css">
    <style>
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:320px;height:500px;overflow-y:scroll;overflow-x:auto;}
    </style>

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- text fonts -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/fonts.googleapis.com.css" />
<!-- ace styles -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/static/alert/jquery-confirm.min.css" />
<!--[if !IE]> -->
<script src="<%=request.getContextPath()%>/ace/assets/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->
<script src="<%=request.getContextPath()%>/static/alert/jquery-confirm.min.js"></script>
</head>
<body>
		<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>
					角色管理
				</h1>
			</div>
			<!-- /.page-header -->
				<c:if test="${not empty msg}">
					<div id="myAlert" class="alert alert-warning">
						<a href="#" class="close" data-dismiss="alert">&times;</a>
						<strong>警告！</strong>${msg }。
					</div>
				</c:if>
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
						  <form:form method="post" commandName="role" class="form-horizontal">
					        <form:hidden path="id"/>
					        <form:hidden path="available"/>
					        
					
					        <div class="form-group">
					            <form:label path="role" class="col-sm-3 control-label no-padding-right">角色名：</form:label>
					            <form:input path="role" class="col-xs-10 col-sm-5"/>
					        </div>
					        
					        <div class="form-group">
					            <form:label path="dept_name" class="col-sm-2 control-label">所属部门：</form:label>
					            <form:hidden path="dept_id"/>
					            <form:input path="dept_name" disabled="true" placeholder="请选择所属部门"/>
					            <a id="deptBtn" href="#">选择</a>
						        
					        </div>
					
					        <div class="form-group">
					            <form:label path="description" class="col-sm-3 control-label no-padding-right">角色描述：</form:label>
					            <form:input path="description" class="col-xs-10 col-sm-5"/>
					        </div>
					
					
					        <div class="form-group">
					        	<div class="col-sm-5">
						            <form:label path="resource_ids" class="col-sm-3 control-label no-padding-right">功能权限：</form:label>
						            <form:hidden path="resource_ids"/>
							        <ul id="memutree" class="ztree" style="width:230px; overflow:auto;"></ul>
						        </div>
					         	<div class="col-sm-5">
						            <form:label path="data_dept_ids" class="col-sm-3 control-label no-padding-right">数据权限：</form:label>
						            <form:hidden path="data_dept_ids"/>
							        <ul id="datadepttree" class="ztree" style="width:230px; overflow:auto;"></ul>
						        </div>
					        </div>
					        
					
					        <form:button class="btn btn-info col-md-offset-3">${op}</form:button>
					
					    </form:form>
					
						 

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
  
    <!-- 选择部门 -->
	<div id="deptContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="deptTree" class="ztree" style="margin-top:0; width:200px;"></ul>
    </div>
    

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/JQuery zTree v3.5.15/js/jquery.ztree.all-3.5.min.js"></script>
    <script>
    $(function () {
    	var zTreeObj,
    	setting = {
    			
                view: {
                    dblClickExpand: false,
                    showIcon: true,
                    showLine: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onCheck: onCheck,
                    onClick: onClick
                }
               
    	};
    	 function onCheck(e, treeId, treeNode) {
    		 //alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
             $("#dept_id").val(treeNode.id);
             $("#dept_name").val(treeNode.name);
//             hideMenu();
         }
    	 function onClick(e, treeId, treeNode) {
             var zTree = $.fn.zTree.getZTreeObj("deptTree"),
                     nodes = zTree.getSelectedNodes(),
                     id = "",
                     name = "";
             nodes.sort(function compare(a,b){return a.id-b.id;});
             for (var i=0, l=nodes.length; i<l; i++) {
                 id += nodes[i].id + ",";
                 name += nodes[i].name + ",";
             }
             if (id.length > 0 ) id = id.substring(0, id.length-1);
             if (name.length > 0 ) name = name.substring(0, name.length-1);
             $("#dept_id").val(id);
             $("#dept_name").val(name);
             hideMenu();
         }
    	 function showMenu() {
             var cityObj = $("#dept_name");
             var cityOffset = $("#dept_name").offset();
             $("#deptContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

             $("body").bind("mousedown", onBodyDown);
         }
         function hideMenu() {
             $("#deptContent").fadeOut("fast");
             $("body").unbind("mousedown", onBodyDown);
         }
         function onBodyDown(event) {
             if (!(event.target.id == "deptBtn" || event.target.id == "deptContent" || $(event.target).parents("#deptContent").length>0)) {
                 hideMenu();
             }
         }
    	zTreeNodes = [
    		<c:forEach items="${dataDeptList}" var="d">
            <c:if test="${not d.rootNode}">
            { id:${d.id}, pId:${d.parent_id}, name:"${d.name}", checked:${lyndonfn:in(role.resourceIds, d.id)}},
            </c:if>
            </c:forEach>
    	];

    	var treeObj = $.fn.zTree.init($("#deptTree"), setting, zTreeNodes);
    	 treeObj.expandAll(true);
        $("#deptBtn").click(showMenu);
    });
      /* 菜单树开始 */
        $(function () {
            var setting = {
                check: {
                    enable: true ,
                    chkboxType: { "Y": "ps", "N": "s" }
                },
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onCheck: onCheck
                }
            };

            var zNodes =[
                <c:forEach items="${resourceList}" var="r">
                <c:if test="${not r.rootNode}">
                { id:${r.id}, pId:${r.parent_id}, name:"${r.name}", checked:${lyndonfn:in(role.resourceIds, r.id)}},
                </c:if>
                </c:forEach>
            ];

            function onCheck(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("memutree"),
                        nodes = zTree.getCheckedNodes(true),
                        id = "";
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                $("#resource_ids").val(id);
            }
            var treeObj = $.fn.zTree.init($("#memutree"), setting, zNodes);
            treeObj.expandAll(true);
        });
        /* 数据权限树开始 */
        $(function () {
            var setting = {
                check: {
                    enable: true ,
                    chkboxType: { "Y": "s", "N": "s" }
                },
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onCheck: onCheck
                }
            };

            var zNodes =[
                <c:forEach items="${dataDeptList}" var="d">
                <c:if test="${not d.rootNode}">
                { id:${d.id}, pId:${d.parent_id}, name:"${d.name}", checked:${lyndonfn:in(role.datadeptIds, d.id)}},
                </c:if>
                </c:forEach>
            ];

            function onCheck(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("datadepttree"),
                        nodes = zTree.getCheckedNodes(true),
                        id = "";
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                $("#data_dept_ids").val(id);
            }
            var treeObj = $.fn.zTree.init($("#datadepttree"), setting, zNodes);
            treeObj.expandAll(true);
        });
    </script>

<script src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/ace/assets/js/bootbox.js"></script>
</body>
</html>